<template>
    <div class="slider">
        <a-menu
            mode="horizontal"
            v-model:openKeys="openKeys"
            v-model:selectedKeys="selectedKeys"
            @update:openKeys="hdlChangeOpenKeys"
            @select="hdlSelectedKeys"
            triggerSubMenuAction="hover"
            :style="{ width: '500px' }"
        >
            <SliderSubMenu
                v-for="item in menuRoutes"
                :key="item.path"
                :treeData="item"
                :parentPath="item.path"
                :isFirstDepth="true"
            />
        </a-menu>
    </div>
</template>

<script setup lang="ts">
    import SliderSubMenu from "./comps/SliderSubMenu/SliderSubMenu.vue";
    // import menuRoutes from "@/router/menuRoutes";
    import useGlobalStore from "@/stores/global.store";
    // const { menuRoutes } = storeToRefs(useGlobalStore());
    import menuRoutesList from "@/router/menuRoutes";
    const menuRoutes: any = menuRoutesList;
    // console.log(menuRoutes);

    const route = useRoute();
    const openKeys = ref<string[]>([]);
    const selectedKeys = ref<string[]>([]);

    provide("openKeys", openKeys);
    provide("selectedKeys", selectedKeys);

    const hdlChangeOpenKeys = (keys: string[]) => {
        let arr: string[] = [];
        let len = keys.length;
        for (let i = len - 1; i >= 0; i--) {
            let prev = keys[i - 1];
            let item = keys[i];
            arr.push(item);
            if (prev && prev != "/") {
                if (item.startsWith(keys[i - 1])) {
                    arr.push(prev);
                }
                {
                    break;
                }
            }
        }
        openKeys.value = arr;
    };

    const hdlSelectedKeys = ({ item, key, selectedKeys }: any) => {
        if (item["data-only"]) {
            openKeys.value = [];
        }
    };

    const initKeys = () => {
        const path = route.path;
        // openKeys.value = route.matched.map((item) => {
        //     return item.path;
        // });
        selectedKeys.value = [path];
    };

    watch(
        () => route.path,
        (newValue, oldVal) => {
            initKeys();
        },
        {
            immediate: true,
        },
    );
</script>

<style lang="scss" scoped src="./Slider.scss"></style>
